<template>
    <div>
      <van-tabs v-if='chenload' v-model="active"  swipeable color="#0287FF" :line-width=45  title-active-color="#000" title-inactive-color="#C2C9D3" style="height: 100%">
        <van-tab title="未使用" >
			<div v-if='coursearr.length!=0'>
				<div style="margin-top: 0.07rem;width: 92%;margin: auto" v-for="(item,index) in coursearr">
					<div class="con" v-if="item.type==1">
						<div class="conevery">
							<p class="zhe">
							  {{item.rate}}<span>折</span>
							</p>
							<div class="time">
								<p>{{item.rate}}折优惠券</p>
								<p class="timeman" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
								<p class="timeman" v-else>满{{item.amount}}元可使用</p>
								<p>有效期至 {{item.end_time}}</p>
							</div>
						</div>
						<!-- v-if='item.status==1||item.status=="1"' -->
						<van-button :class='item.status==1||item.status=="1"?"info":"info1"' type="default">{{item.tag}}</van-button>
					</div>
						<div class="con" v-if="item.type==2">
						<div class="conevery">
							<p class="zhe">
							  <span>满减劵</span>
							</p>
							<div class="time">
								<p>满减{{item.reduction}}优惠券</p>
								<p class="timeman" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
								<p class="timeman" v-else>满{{item.amount}}元可使用</p>
								<p>有效期至 {{item.end_time}}</p>
							</div>
						</div>
						<!-- v-if='item.status==1||item.status=="1"' -->
						<van-button :class='item.status==1||item.status=="1"?"info":"info1"' type="default">{{item.tag}}</van-button>
					</div>
				</div>
			</div>






			<div v-else class="chen-kongbai">
				<div class="chen-kongpic">
					<img :src="imgSrc" mode=""/> 
				</div>
				<div class="chen-kong-text"><span>您还没有优惠券</span></div>
			</div>
        </van-tab>
        <van-tab title="已使用">
          
         <div v-if='coursearrnew.length!=0||coursearrnew.length!="0"'>
         	<div class="usercolortop" style="margin-top: 0.07rem;width: 6.9rem;margin: auto" v-for="(item,index) in coursearrnew">
         		<div class="con" v-if="item.type==1">
					<div class="conevery">
						<p class="zhe usercolor">
						  {{item.rate}}<span class="usercolor">折</span>
						</p>
						<div class="time usercolor">
							<p>{{item.rate}}折优惠券</p>
							<!-- <p class="timeman usercolor">满{{item.amount}}元可使用</p> -->
							<p class="timeman usercolor" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
							<p class="timeman usercolor" v-else>满{{item.amount}}元可使用</p>
							<p>有效期至 {{item.end_time}}</p>
						</div>
         			</div>
         			<!-- v-if='item.status==1||item.status=="1"' -->
         			<van-button class='info1' type="default">{{item.tag}}</van-button>
         		</div>
				 	<div class="con" v-if="item.type==2">
					<div class="conevery">
						<p class="zhe usercolor">
						 <span>满减劵</span>
						</p>
						<div class="time usercolor">
							<p>满减{{item.reduction}}优惠券</p>
							<!-- <p class="timeman usercolor">满{{item.amount}}元可使用</p> -->
							<p class="timeman usercolor" v-if="Number(item.top_amount)>0">满{{item.amount}}-{{item.top_amount}}元可使用</p>
							<p class="timeman usercolor" v-else>满{{item.amount}}元可使用</p>
							<p>有效期至 {{item.end_time}}</p>
						</div>
         			</div>
         			<!-- v-if='item.status==1||item.status=="1"' -->
         			<van-button class='info1' type="default">{{item.tag}}</van-button>
         		</div>
         	</div>
         </div>
         <div v-else class="chen-kongbai">
         	<div class="chen-kongpic">
         		<img :src="imgSrc" mode=""></img>
         	</div>
         	<div class="chen-kong-text"><span>您还没有已使用的优惠券</span></div>
         </div>
        </van-tab>
      </van-tabs>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>
</template>

<script>
    export default {
        name: "Youhui",
      data(){
          return{
			imgSrc: require("../../assets/img/kongbai.png"), 
            active:0,
			chenload:false,
            coursearr:[],//可用优惠券
			coursearrnew:[],  //已使用优惠券
            
          }
      },
			methods:{
				// 查询用户可用优惠券
				coupon(){
					this.axios.get(this.$store.state.url +'User/coupon',{
						params:{
							status:1,
						}
					}).then(res=>{
						this.chenload=true;
						if(res.data.errcode==0||res.data.errcode=='0'){
							this.coursearr=res.data.data;
							 console.log(this.coursearr);
						}
					})
				},
				// 查询用户已使用优惠券
				couponuser(){
					this.axios.get(this.$store.state.url +'User/coupon',{
						 params:{
							 status:2
						 }
					}).then(res=>{
					this.chenload=true;
					if(res.data.errcode==0||res.data.errcode=='0'){
						this.coursearrnew=res.data.data;
						 console.log(this.coursearr);
					}
					})
				},
				
			},
			mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
               this.coupon();
			   this.couponuser();
 
			}
    }
</script>

<style scoped>
  >>>.van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  >>>.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .usercolortop .usercolor{
	  color: #999 !important;
  }
  .con{
    width: 6.9rem;
    /* height: 1.37rem; */
    margin-top: 0.3rem;
    background: url("../../../src/assets/img/person/yi.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding: .2rem .3rem;
  }
  .conevery{
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  /* padding-left: .3rem; */
  }
  .zhe{
    font-size:0.6rem;
    font-weight:bold;
    color:rgba(222,34,48,1);
    /* line-height:0.44rem; */
  }
  .zhe span{
    font-size:0.34rem;
    color:rgba(222,34,48,1);
    line-height:0.24rem;
  }
  .time{
	  margin-left: .2rem;
  }
  .time p:nth-child(1){
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .time p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    /* margin-top: 0.1rem; */
  }
  .timeman{
  	  color: #DE2230 !important;
  	  margin: .1rem 0;
  }
  .info{
    width:1.6rem;
    height:0.46rem;
    background:rgba(2,135,255,1);
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
	/* margin-right: ; */
  }
  .info1{
    width:1.6rem;
    height:0.46rem;
    background:#999999;
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
  }
</style>
